import {designPage, reactive} from "plain-design-composition";
import data from '../../../data/data-1.json';
import {DemoRow} from "../../Demo/DemoRow";
import {Adc, AdcGroup, AdcIndex, AntdTable} from "../../../../packages";
import {PlainObject} from "plain-utils/utils/event";

export const demo1 = designPage(() => {

  const cols = new Array(40).fill(null).map((_, i) => ({ title: `列_${i + 1}`, field: `field_${i}` }));
  const data = new Array(100).fill(null).map((_, i) => cols.reduce((prev, item) => {
    prev[item.field] = `${item.title},行_${i}`;
    return prev;
  }, {} as PlainObject));
  const fixedData = [data.pop()!];

  const state = reactive({
    data,
  });

  const footer = () => <>
    footer
  </>;

  return () => (
    <DemoRow title="基本用法">
      <AntdTable
        showRows={5}
        v-model:dataSource={state.data}
        summaryDataSource={fixedData}
        colDraggable
        rowDraggable
        bordered
        virtualColumn
        virtual
        onClickRowDraggier={() => {console.log('click row draggier');}}
        onClickColDraggier={() => {console.log('click col draggier');}}
        footer={footer}
        pagination={false}
      >
        <AdcIndex key="index"/>
        {cols.map((col, index) => (
          <Adc title={col.title} dataIndex={col.field} key={col.field} fixed={index === 0 ? 'left' : index === cols.length - 1 ? 'right' : undefined}/>
        ))}
      </AntdTable>
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  const state = reactive({
    data,
  });

  return () => (
    <DemoRow title={'分组表头中拖拽排序'}>
      <AntdTable
        v-model:dataSource={state.data}
        colDraggable
        rowDraggable
        bordered
        showRows={10}
        pagination={false}
      >
        <AdcIndex/>
        <Adc dataIndex={'id'} title={'1_编号'} fixed="left"/>
        <AdcGroup title={'2_分组'}>
          <Adc dataIndex={'size'} title={'2-1_尺寸'}/>
          <Adc dataIndex={'date'} title={'2-2_日期'}/>
        </AdcGroup>
        <Adc dataIndex={'color'} title={'3_颜色'} align="right"/>
        <AdcGroup title={'4_分组'}>
          <AdcGroup title={'4-1_分组'}>
            <Adc dataIndex={'name'} title={'4-1-1_名称'}/>
            <Adc dataIndex={'star'} title={'4-1-2_评分'}/>
          </AdcGroup>
          <Adc dataIndex={'id'} title={'4-2_编号'}/>
        </AdcGroup>
        <Adc dataIndex="size" title="5_尺寸"/>
        <Adc dataIndex="date" title="6_日期"/>
        <Adc dataIndex="color" title="7_颜色"/>
        <Adc dataIndex="name" title="8_名称"/>
        <Adc dataIndex="star" title="9_评分" fixed="right"/>
      </AntdTable>
    </DemoRow>
  );
});
